<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回到顶部</title>
</head>
<style>
    body {
        height: 6000px;
    }

    #btn {
        position: fixed;
        right: 100px;
        bottom: 100px;
        display: none;
    }
</style>
<body>
    <button id='btn'>回到顶部</button>
    <!-- 1.最开始的按钮隐藏 -->
    <!-- 2.当滚动条滚动到1000的位置，显示回到顶部的按钮
    3.点击回到顶部的按钮，把滚动条滚动到最顶部 -->
    <script>
        window.onscroll=function(){
            if(scrollY>=1000){
                btn.style.display='black';
            }else{
                btn.style.display='none'
            }
        }
        var timer;
        btn.onclick=function(){
            clearInterval(timer)
        
        timer=setInterval(function(){
            if(scrollY<=0){
                clearInterval(timer)
            }
    
        scrollTo({top:scrollY-100})
    },100);
}
    </script>

    
</body>
</html>